<template>
  <div class="comprehensive">
    <div class="Btn flex">
      <div></div>
      <div class="submit" @click="submit">确认提交</div>
    </div>
    <div class="title">应急组织机构及职责</div>
    <div class="responsibility flex">
      <div class="responsibility_1">
        <div class="top flex">
          <div class="Owned" @click="isEditing && current !== '应急救援指挥部' ? null : current = '应急救援指挥部'" :style="{
            background: current === '应急救援指挥部' ? 'rgba(22, 93, 255, 0.20)' : '',
            color: current === '应急救援指挥部' ? '#4A5667' : '#6A788D',
            'border-color': isEditing && current !== '应急救援指挥部' ? '#cccccc' : '#165DFF',
            'cursor': isEditing && current !== '应急救援指挥部' ? 'not-allowed' : 'pointer'
          }" :class="{ 'disabled': isEditing && current !== '应急救援指挥部' }">
            福建龙钢新型材料有限公司
            生产安全事故应急救援指挥部
          </div>
          <div class="arrow"></div>
          <div class="text" @click="isEditing && current !== '应急办公室' ? null : current = '应急办公室'" :style="{
            background: current === '应急办公室' ? 'rgba(22, 93, 255, 0.20)' : '',
            color: current === '应急办公室' ? '#4A5667' : '#6A788D',
            'border-color': isEditing && current !== '应急办公室' ? '#cccccc' : '#165DFF',
            'cursor': isEditing && current !== '应急办公室' ? 'not-allowed' : 'pointer'
          }" :class="{ 'disabled': isEditing && current !== '应急办公室' }">应急办公室</div>
        </div>
        <div class="mid"></div>
        <div class="bottom flex">
          <div v-for="item in OwnedList" :key="item" :class="{
            active: item === current,
            disabled: isEditing && item !== current
          }" @click="isEditing && item !== current ? null : current = item">
            {{ item }}
          </div>
        </div>
      </div>
      <div class="responsibility_2">
        <div class="List flex">
          <div class="List_title">所属职责</div>
          <div v-if="emergency === true && resList && resList.length > 0" v-html="resList[0].所属职责1" class="List_con"
            @mouseenter="checkOverflow(resList[0].所属职责1, '移入')" @mouseleave="checkOverflow(resList[0].所属职责1, '移出')">
          </div>
          <div class="List_con" v-if="emergency === false && resList && resList.length > 0">
            <el-input v-model="resList[0].所属职责" />
          </div>
          <div v-if="resList && resList[0] && resList[0].所属职责1" v-html="resList[0].所属职责1" class="hover_con"
            v-show="isOverflow"></div>
        </div>
        <div class="List flex">
          <div class="List_title">所属人员</div>
          <div class="List_con" v-if="emergency === true && resList[0] && resList[0].所属人员">{{ resList[0].所属人员 }}</div>
          <div class="List_con" v-if="emergency === false">
            <el-input v-model="resList[0].所属人员" />
          </div>
        </div>
        <div class="resList">
          <div v-for="(item, index) in resList" :key="index"
            :class="resList && resList.length > 1 ? 'resList_1' : 'resList_2'">
            <div class="resList_List flex">
              <div class="resList_title">负责人所在单位</div>
              <div class="resList_con" v-if="emergency === true">{{ item.负责人所在单位 }}</div>
              <div class="resList_con" v-if="emergency === false">
                <el-input v-model="item.负责人所在单位" />
              </div>

              <div class="resList_title">负责人公司职位</div>
              <div class="resList_con" v-if="emergency === true">{{ item.负责人公司职位 }}</div>
              <div class="resList_con" v-if="emergency === false">
                <el-input v-model="item.负责人公司职位" />
              </div>
              <div class="resList_title">应急角色</div>
              <div class="resList_con" v-if="emergency === true">{{ item.应急角色 }}</div>
              <div class="resList_con" v-if="emergency === false">
                <el-input v-model="item.应急角色" />
              </div>
            </div>
            <div class="resList_List flex">
              <div class="resList_title">应急角色职责</div>
              <div v-if="emergency === true"
                :class="item.应急角色职责 && item.应急角色职责.length > 100 ? 'resList_hidden' : 'resList_cons'">
                {{ item.应急角色职责 || '' }}
              </div>
              <div :class="resList.length > 1 ? 'resList_cons' : 'resList_conB'" v-if="emergency === false">
                <el-input v-model="item.应急角色职责" />
                <i class="el-icon-close" @click="handlerClick('应急组织机构及职责', '删除', index)"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="editBtn">
      <div class="edit" v-show="emergency === true" @click="handlerClick('应急组织机构及职责', '编辑')">编辑</div>
      <div class="btnList flex" v-show="emergency === false">
        <div @click="handlerClick('应急组织机构及职责', '取消')">取消</div>
        <div @click="handlerClick('应急组织机构及职责', '添加')">添加</div>
        <div @click="handlerClick('应急组织机构及职责', '完成')">完成</div>
      </div>
    </div>
    <div class="Line"></div>
    <div class="title">响应分级</div>
    <div class="on_title">响应分级</div>
    <div class="response">
      响应分级按照事故的类别、危害程度、影响范围及我公司控制事态的能力，并根据分级负责的基本原则，将响应分级由高到低分为Ⅰ级响应、Ⅱ级响应、
      Ⅲ级响应、Ⅳ级响应四个等级。其中Ⅱ级响应、Ⅲ级、W级响应响应为公司(各分厂)内部响应，1级社会响应为公司(各分厂)内无法处理，应请求上级部门响应。
      当上级部门到达现场后，公司应急救援指挥部应当向上级部门汇报现场及救援情况，并移交指挥权，服从上级部门统一调遣和指挥。
    </div>
    <div class="table">
      <div>
        <el-table :data="tableData" style="width:100%" height="336">
          <el-table-column prop="响应等级" label="响应等级" width="" align="center">
            <template slot-scope="scope">
              <div v-if="response === true">{{ scope.row.响应等级 }}</div>
              <div v-else>
                <el-input v-model="scope.row.响应等级" />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="响应条件" label="响应条件" align="center">
            <template slot-scope="scope">
              <div v-if="response === true">{{ scope.row.响应条件 }}</div>
              <div v-else>
                <el-input v-model="scope.row.响应条件" />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="影响范围" label="影响范围及程度" width="" align="center">
            <template slot-scope="scope">
              <div v-if="response === true">{{ scope.row.影响范围 }}</div>
              <div v-else>
                <el-input v-model="scope.row.影响范围" />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="控制事态能力" label="控制事态能力" width="" align="center">
            <template slot-scope="scope">
              <div v-if="response === true">{{ scope.row.控制事态能力 }}</div>
              <div v-else>
                <el-input v-model="scope.row.控制事态能力" />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="应急预案启动级别" label="应急预案启动级别" width="" align="center">
            <template slot-scope="scope">
              <div v-if="response === true">{{ scope.row.应急预案启动级别 }}</div>
              <div v-else>
                <el-input v-model="scope.row.应急预案启动级别" />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="预警等级" label="预警等级" width="" align="center">
            <template slot-scope="scope">
              <div v-if="response === true">{{ scope.row.预警等级 }}</div>
              <div v-else>
                <el-input v-model="scope.row.预警等级" />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="指挥机构" label="指挥机构" width="" align="center">
            <template slot-scope="scope">
              <div v-if="response === true">{{ scope.row.指挥机构 }}</div>
              <div v-else>
                <el-input v-model="scope.row.指挥机构" />
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="editBtn">
          <div class="edit" v-show="response === true" @click="handlerClick('响应分级', '编辑')">编辑</div>
          <div class="btnList flex" v-show="response === false">
            <div @click="handlerClick('响应分级', '取消')">取消</div>
            <div @click="handlerClick('响应分级', '完成')">完成</div>
          </div>
        </div>
      </div>
    </div>
    <div class="on_title">内容事故分级</div>
    <div class="accident">
      <div>
        <div class="accident_title flex">
          <div>类别 \ 级别</div>
          <div>特大事故（Ⅰ级、红色）</div>
          <div>重大事故（Ⅱ级、橙色）</div>
          <div>较大事故（Ⅲ级、黄色）</div>
          <div>一般事故（Ⅳ级、蓝色）</div>
        </div>
        <div class="accident_content flex">
          <div>人身伤亡事故</div>
          <!-- 特大事故（Ⅰ级、红色） -->
          <div v-if="accidentList.length > 0 && accidentList[0] && accidentList[0].事故等级标准 && accident === true">
            {{ accidentList[0].事故等级标准 }}
          </div>
          <div v-if="accident === false && accidentList.length > 0 && accidentList[0]">
            <el-input v-model="accidentList[0].事故等级标准" />
          </div>
          <!-- 重大事故（Ⅱ级、橙色） -->
          <div v-if="accidentList.length > 1 && accidentList[1] && accidentList[1].事故等级标准 && accident === true">
            {{ accidentList[1].事故等级标准 }}
          </div>
          <div v-if="accident === false && accidentList.length > 1 && accidentList[1]">
            <el-input v-model="accidentList[1].事故等级标准" />
          </div>
          <!-- 较大事故（Ⅲ级、黄色） -->
          <div v-if="accidentList.length > 2 && accidentList[2] && accidentList[2].事故等级标准 && accident === true">
            {{ accidentList[2].事故等级标准 }}
          </div>
          <div v-if="accident === false && accidentList.length > 2 && accidentList[2]">
            <el-input v-model="accidentList[2].事故等级标准" />
          </div>
          <!-- 一般事故（Ⅳ级、蓝色） -->
          <div v-if="accidentList.length > 3 && accidentList[3] && accidentList[3].事故等级标准 && accident === true">
            {{ accidentList[3].事故等级标准 }}
          </div>
          <div v-if="accident === false && accidentList.length > 3 && accidentList[3]">
            <el-input v-model="accidentList[3].事故等级标准" />
          </div>
        </div>
        <div class="editBtn">
          <div class="edit" v-show="accident === true" @click="handlerClick('内容事故分级', '编辑')">编辑</div>
          <div class="btnList flex" v-show="accident === false">
            <div @click="handlerClick('内容事故分级', '取消')">取消</div>
            <div @click="handlerClick('内容事故分级', '完成')">完成</div>
          </div>
        </div>
      </div>
    </div>
    <div class="Line"></div>
    <div class="title">应急响应</div>
    <div class="on_title">信息报告</div>
    <div class="information flex">
      <div class="information_1">
        <div class="information_title">报告类型</div>
        <div class="information_con">
          <div v-for="(item, index) in informationList" :key="index" :class="current1 === item.报告类型 ? 'active' : ''"
            @click="current1 = item.报告类型">
            <div class="content_2 " v-if="information === true">{{ item.报告类型 }}</div>
            <div class="content_2 flex" v-else>
              <el-input v-model="item.报告类型" />
              <i class="el-icon-delete" @click="clickChange('信息报告', '删除', index)"></i>
            </div>
          </div>
        </div>
        <div class="Btns flex">
          <div class="edit" @click="clickChange('信息报告', '编辑')" v-show="information === true">编辑</div>
          <div class="btnList flex" v-show="information === false">
            <div @click="clickChange('信息报告', '取消')">取消</div>
            <div @click="clickChange('信息报告', '添加')">添加</div>
            <div @click="clickChange('信息报告', '完成')">完成</div>
          </div>
        </div>
      </div>
      <div class="information_2">
        <div class="information_title">报告内容</div>
        <div class="information_con">
          <div v-for="(item, index) in informationData" :key="index" class="flex">
            <div class="content_1">{{ index + 1 }}.</div>
            <div class="content_2" v-if="information1 === true">{{ item.value }}</div>
            <div class="content_2 flex" v-else>
              <el-input v-model="item.value" />
              <i class="el-icon-delete" @click="clickChange('信息报告1', '删除', index)"></i>
            </div>
          </div>
        </div>
        <div class="Btns flex">
          <div class="edit" @click="clickChange('信息报告1', '编辑')" v-show="information1 === true">编辑</div>
          <div class="btnList flex" v-show="information1 === false">
            <div @click="clickChange('信息报告1', '取消')">取消</div>
            <div @click="clickChange('信息报告1', '添加')">添加</div>
            <div @click="clickChange('信息报告1', '完成')">完成</div>
          </div>
        </div>
      </div>
    </div>
    <div class="on_title">预警启动</div>
    <div class="information flex">
      <div class="information_1">
        <div class="information_title">预警启动类型</div>
        <div class="information_con">
          <div v-for="(item, index) in warningList" :key="index" :class="current2 === item.预警启动类型 ? 'active' : ''"
            @click="current2 = item.预警启动类型">
            <div class="content_2 " v-if="warning === true">{{ item.预警启动类型 }}</div>
            <div class="content_2 flex" v-else>
              <el-input v-model="item.预警启动类型" />
              <i class="el-icon-delete" @click="clickChange('预警启动', '删除', index)"></i>
            </div>
          </div>
        </div>
        <div class="Btns flex">
          <div class="edit" @click="clickChange('预警启动', '编辑')" v-show="warning === true">编辑</div>
          <div class="btnList flex" v-show="warning === false">
            <div @click="clickChange('预警启动', '取消')">取消</div>
            <div @click="clickChange('预警启动', '添加')">添加</div>
            <div @click="clickChange('预警启动', '完成')">完成</div>
          </div>
        </div>
      </div>
      <div class="information_2">
        <div class="information_title">预警启动内容</div>
        <div class="information_con">
          <div v-for="(item, index) in warningData" :key="index" class="flex">
            <div class="content_1">{{ index + 1 }}.</div>
            <div class="content_2" v-if="warning1 === true">{{ item.value }}</div>
            <div class="content_2 flex" v-else>
              <el-input v-model="item.value" />
              <i class="el-icon-delete" @click="clickChange('预警启动1', '删除', index)"></i>
            </div>
          </div>
        </div>
        <div class="Btns flex">
          <div class="edit" @click="clickChange('预警启动1', '编辑')" v-show="warning1 === true">编辑</div>
          <div class="btnList flex" v-show="warning1 === false">
            <div @click="clickChange('预警启动1', '取消')">取消</div>
            <div @click="clickChange('预警启动1', '添加')">添加</div>
            <div @click="clickChange('预警启动1', '完成')">完成</div>
          </div>
        </div>
      </div>
    </div>
    <div class="on_title">响应启动</div>
    <div class="responseTo">
      <div>
        <div class="responseTo_title flex">
          <div>Ⅰ级响应</div>
          <div>Ⅱ级响应</div>
          <div>Ⅲ级响应程序</div>
          <div> IV 级响应</div>
        </div>
        <div class="responseTo_con flex"
          v-if="responseToList.length > 0 && responseToList[0] && responseToList[0].响应启动内容 && responseTo === true">
          <div>{{ responseToList[0].响应启动内容 }}</div>
          <div>{{ responseToList[1].响应启动内容 }}</div>
          <div>{{ responseToList[2].响应启动内容 }}</div>
          <div>{{ responseToList[3].响应启动内容 }}</div>
        </div>
        <div class="responseTo_con flex" v-if="responseTo === false && responseToList.length > 0 && responseToList[0]">
          <div>
            <el-input type="textarea" v-model="responseToList[0].响应启动内容" class="fixed-height-textarea" />
          </div>
          <div>
            <el-input type="textarea" v-model="responseToList[1].响应启动内容" class="fixed-height-textarea" />
          </div>
          <div>
            <el-input type="textarea" v-model="responseToList[2].响应启动内容" class="fixed-height-textarea" />
          </div>
          <div>
            <el-input type="textarea" v-model="responseToList[3].响应启动内容" class="fixed-height-textarea" />
          </div>
        </div>
        <div class="editBtn">
          <div class="edit" v-show="responseTo === true" @click="handlerClick('响应启动', '编辑')">编辑</div>
          <div class="btnList flex" v-show="responseTo === false">
            <div @click="handlerClick('响应启动', '取消')">取消</div>
            <div @click="handlerClick('响应启动', '完成')">完成</div>
          </div>
        </div>
      </div>
    </div>
    <div class="imgs"></div>
    <div class="on_title">应急处置</div>
    <div class="information flex">
      <div class="information_1">
        <div class="information_title">处置类型</div>
        <div class="information_con">
          <div v-for="(item, index) in disposeList" :key="index" :class="current3 === item.处置类型 ? 'active' : ''"
            @click="current3 = item.处置类型">
            <div class="content_2 " v-if="dispose === true">{{ item.处置类型 }}</div>
            <div class="content_2 flex" v-else>
              <el-input v-model="item.处置类型" />
              <i class="el-icon-delete" @click="clickChange('应急处置', '删除', index)"></i>
            </div>
          </div>
        </div>
        <div class="Btns flex">
          <div class="edit" @click="clickChange('应急处置', '编辑')" v-show="dispose === true">编辑</div>
          <div class="btnList flex" v-show="dispose === false">
            <div @click="clickChange('应急处置', '取消')">取消</div>
            <div @click="clickChange('应急处置', '添加')">添加</div>
            <div @click="clickChange('应急处置', '完成')">完成</div>
          </div>
        </div>
      </div>
      <div class="information_2">
        <div class="information_title">处置内容</div>
        <div class="information_con">
          <div v-for="(item, index) in disposeData" :key="index" class="flex">
            <div class="content_1">{{ index + 1 }}.</div>
            <div class="content_2" v-if="dispose1 === true">{{ item.value }}</div>
            <div class="content_2 flex" v-else>
              <el-input v-model="item.value" />
              <i class="el-icon-delete" @click="clickChange('应急处置1', '删除', index)"></i>
            </div>
          </div>
        </div>
        <div class="Btns flex">
          <div class="edit" @click="clickChange('应急处置1', '编辑')" v-show="dispose1 === true">编辑</div>
          <div class="btnList flex" v-show="dispose1 === false">
            <div @click="clickChange('应急处置1', '取消')">取消</div>
            <div @click="clickChange('应急处置1', '添加')">添加</div>
            <div @click="clickChange('应急处置1', '完成')">完成</div>
          </div>
        </div>
      </div>
    </div>
    <div class="on_title">应急支援</div>
    <div class="information flex">
      <div class="information_1">
        <div class="information_title">应急支援类型</div>
        <div class="information_con">
          <div v-for="(item, index) in supportList" :key="index" :class="current4 === item.支援类型 ? 'active' : ''"
            @click="current4 = item.支援类型">
            <div class="content_2 " v-if="support === true">{{ item.支援类型 }}</div>
            <div class="content_2 flex" v-else>
              <el-input v-model="item.支援类型" />
              <i class="el-icon-delete" @click="clickChange('应急支援', '删除', index)"></i>
            </div>
          </div>
        </div>
        <div class="Btns flex">
          <div class="edit" @click="clickChange('应急支援', '编辑')" v-show="support === true">编辑</div>
          <div class="btnList flex" v-show="support === false">
            <div @click="clickChange('应急支援', '取消')">取消</div>
            <div @click="clickChange('应急支援', '添加')">添加</div>
            <div @click="clickChange('应急支援', '完成')">完成</div>
          </div>
        </div>
      </div>
      <div class="information_2">
        <div class="information_title">应急支援内容</div>
        <div class="information_con">
          <div v-for="(item, index) in supportData" :key="index" class="flex">
            <div class="content_1">{{ index + 1 }}.</div>
            <div class="content_2" v-if="support1 === true">{{ item.value }}</div>
            <div class="content_2 flex" v-else>
              <el-input v-model="item.value" />
              <i class="el-icon-delete" @click="clickChange('应急支援1', '删除', index)"></i>
            </div>
          </div>
        </div>
        <div class="Btns flex">
          <div class="edit" @click="clickChange('应急支援1', '编辑')" v-show="support1 === true">编辑</div>
          <div class="btnList flex" v-show="support1 === false">
            <div @click="clickChange('应急支援1', '取消')">取消</div>
            <div @click="clickChange('应急支援1', '添加')">添加</div>
            <div @click="clickChange('应急支援1', '完成')">完成</div>
          </div>
        </div>
      </div>
    </div>
    <div class="on_title">响应终止</div>
    <div class="information flex">
      <div class="information_1">
        <div class="information_title">响应终止条件</div>
        <div class="information_con">
          <div v-for="(item, index) in terminationList" :key="index" :class="current5 === item.终止类型 ? 'active' : ''"
            @click="current5 = item.终止类型">
            <div class="content_2 " v-if="termination === true">{{ item.终止类型 }}</div>
            <div class="content_2 flex" v-else>
              <el-input v-model="item.终止类型" />
              <i class="el-icon-delete" @click="clickChange('响应终止', '删除', index)"></i>
            </div>
          </div>
        </div>
        <div class="Btns flex">
          <div class="edit" @click="clickChange('响应终止', '编辑')" v-show="termination === true">编辑</div>
          <div class="btnList flex" v-show="termination === false">
            <div @click="clickChange('响应终止', '取消')">取消</div>
            <div @click="clickChange('响应终止', '添加')">添加</div>
            <div @click="clickChange('响应终止', '完成')">完成</div>
          </div>
        </div>
      </div>
      <div class="information_2">
        <div class="information_title">响应终止内容</div>
        <div class="information_con">
          <div v-for="(item, index) in terminationData" :key="index" class="flex">
            <div class="content_1">{{ index + 1 }}.</div>
            <div class="content_2" v-if="termination1 === true">{{ item.value }}</div>
            <div class="content_2 flex" v-else>
              <el-input v-model="item.value" />
              <i class="el-icon-delete" @click="clickChange('响应终止1', '删除', index)"></i>
            </div>
          </div>
        </div>
        <div class="Btns flex">
          <div class="edit" @click="clickChange('响应终止1', '编辑')" v-show="termination1 === true">编辑</div>
          <div class="btnList flex" v-show="termination1 === false">
            <div @click="clickChange('响应终止1', '取消')">取消</div>
            <div @click="clickChange('响应终止1', '添加')">添加</div>
            <div @click="clickChange('响应终止1', '完成')">完成</div>
          </div>
        </div>
      </div>
    </div>
    <div class="Line"></div>
    <div class="title" style="margin-bottom: 16px;">应急保障</div>
    <div class="information flex">
      <div class="information_1">
        <div class="information_title">保障类别</div>
        <div class="information_con">
          <div v-for="(item, index) in guaranteeList" :key="index" :class="current6 === item.保障类型 ? 'active' : ''"
            @click="current6 = item.保障类型">
            <div class="content_2 " v-if="guarantee === true">{{ item.保障类型 }}</div>
            <div class="content_2 flex" v-else>
              <el-input v-model="item.保障类型" />
              <i class="el-icon-delete" @click="clickChange('应急保障', '删除', index)"></i>
            </div>
          </div>
        </div>
        <div class="Btns flex">
          <div class="edit" @click="clickChange('应急保障', '编辑')" v-show="guarantee === true">编辑</div>
          <div class="btnList flex" v-show="guarantee === false">
            <div @click="clickChange('应急保障', '取消')">取消</div>
            <div @click="clickChange('应急保障', '添加')">添加</div>
            <div @click="clickChange('应急保障', '完成')">完成</div>
          </div>
        </div>
      </div>
      <div class="information_2">
        <div class="information_title">报告内容</div>
        <div class="information_con">
          <div v-for="(item, index) in guaranteeData" :key="index" class="flex">
            <div class="content_1">{{ index + 1 }}.</div>
            <div class="content_2" v-if="guarantee1 === true">{{ item.value }}</div>
            <div class="content_2 flex" v-else>
              <el-input v-model="item.value" />
              <i class="el-icon-delete" @click="clickChange('应急保障1', '删除', index)"></i>
            </div>
          </div>
        </div>
        <div class="Btns flex">
          <div class="edit" @click="clickChange('应急保障1', '编辑')" v-show="guarantee1 === true">编辑</div>
          <div class="btnList flex" v-show="guarantee1 === false">
            <div @click="clickChange('应急保障1', '取消')">取消</div>
            <div @click="clickChange('应急保障1', '添加')">添加</div>
            <div @click="clickChange('应急保障1', '完成')">完成</div>
          </div>
        </div>
      </div>
    </div>
    <div class="Line"></div>
    <div class="title">后期处置</div>
    <div class="on_title">后期处置事项</div>
    <div class="later">
      <div>
        <div class="laterS">
          <!-- <div>后期处置事项：</div> -->
          <div v-for="(item, index) in laterDataS" :key="index" class="flex">
            <div class="content_1">{{ index + 1 }}.</div>
            <div class="content_2" v-if="later2 === true">{{ item.事项 }}</div>
            <div class="content_2 flex" v-else>
              <el-input v-model="item.事项" />
              <i class="el-icon-delete" @click="clickChange('后期处置2', '删除', index)"></i>
            </div>
          </div>
        </div>
        <div class="Btns flex">
          <div class="edit" @click="clickChange('后期处置2', '编辑')" v-show="later2 === true">编辑</div>
          <div class="btnList flex" v-show="later2 === false">
            <div @click="clickChange('后期处置2', '取消')">取消</div>
            <div @click="clickChange('后期处置2', '添加')">添加</div>
            <div @click="clickChange('后期处置2', '完成')">完成</div>
          </div>
        </div>
      </div>
    </div>
    <div class="information flex">
      <div class="information_1">
        <div class="information_title">保障类别</div>
        <div class="information_con">
          <div v-for="(item, index) in laterList" :key="index" :class="current7 === item.处置类型 ? 'active' : ''"
            @click="current7 = item.处置类型">
            <div class="content_2 " v-if="later === true">{{ item.处置类型 }}</div>
            <div class="content_2 flex" v-else>
              <el-input v-model="item.处置类型" />
              <i class="el-icon-delete" @click="clickChange('后期处置', '删除', index)"></i>
            </div>
          </div>
        </div>
        <div class="Btns flex">
          <div class="edit" @click="clickChange('后期处置', '编辑')" v-show="later === true">编辑</div>
          <div class="btnList flex" v-show="later === false">
            <div @click="clickChange('后期处置', '取消')">取消</div>
            <div @click="clickChange('后期处置', '添加')">添加</div>
            <div @click="clickChange('后期处置', '完成')">完成</div>
          </div>
        </div>
      </div>
      <div class="information_2">
        <div class="information_title">报告内容</div>
        <div class="information_con">
          <div v-for="(item, index) in laterData" :key="index" class="flex">
            <div class="content_1">{{ index + 1 }}.</div>
            <div class="content_2" v-if="later1 === true">{{ item.value }}</div>
            <div class="content_2 flex" v-else>
              <el-input v-model="item.value" />
              <i class="el-icon-delete" @click="clickChange('后期处置1', '删除', index)"></i>
            </div>
          </div>
        </div>
        <div class="Btns flex">
          <div class="edit" @click="clickChange('后期处置1', '编辑')" v-show="later1 === true">编辑</div>
          <div class="btnList flex" v-show="later1 === false">
            <div @click="clickChange('后期处置1', '取消')">取消</div>
            <div @click="clickChange('后期处置1', '添加')">添加</div>
            <div @click="clickChange('后期处置1', '完成')">完成</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'comprehensive',
  watch: {
    current: {
      handler(val) {
        this.getType(val)
      },
      deep: true
    },
    resList: {
      handler(val) {
        if (val && val.length > 0 && val[0] && val[0].所属职责1) val[0].所属职责1 = val[0].所属职责.replace(/（\d+）/g, "<br>$&")
      },
      deep: true
    },
    current1: {
      handler(val) {
        if (val) {
          const findContentByDisposal = (disposalName) => {
            const item = this.informationList.find(item => item.报告类型 === disposalName);
            return item ? item.报告内容 : "未找到匹配的处置内容";
          }
          this.informationData = findContentByDisposal(val).split(/（\d+）/).filter(item => item.trim() !== '').map(item => ({ value: item.trim() }));
        }
      },
      deep: true
    },
    current2: {
      handler(val) {
        if (val) {
          const findContentByDisposal = (disposalName) => {
            const item = this.warningList.find(item => item.预警启动类型 === disposalName);
            return item ? item.预警启动内容 : "未找到匹配的处置内容";
          }
          this.warningData = findContentByDisposal(val).split(/（\d+）/).filter(item => item.trim() !== '').map(item => ({ value: item.trim() }));
        }
      },
      deep: true
    },
    current3: {
      handler(val) {
        if (val) {
          const findContentByDisposal = (disposalName) => {
            const item = this.disposeList.find(item => item.处置类型 === disposalName);
            return item ? item.处置内容 : "未找到匹配的处置内容";
          }
          this.disposeData = findContentByDisposal(val).split(/（\d+）/).filter(item => item.trim() !== '').map(item => ({ value: item.trim() }));
        }
      },
      deep: true
    },
    current4: {
      handler(val) {
        if (val) {
          const findContentByDisposal = (disposalName) => {
            const item = this.supportList.find(item => item.支援类型 === disposalName);
            return item ? item.支援内容 : "未找到匹配的处置内容";
          }
          this.supportData = findContentByDisposal(val).split(/（\d+）/).filter(item => item.trim() !== '').map(item => ({ value: item.trim() }));
        }
      },
      deep: true
    },
    current5: {
      handler(val) {
        if (val) {
          const findContentByDisposal = (disposalName) => {
            const item = this.terminationList.find(item => item.终止类型 === disposalName);
            return item ? item.终止内容 : "未找到匹配的处置内容";
          }
          this.terminationData = findContentByDisposal(val).split(/（\d+）/).filter(item => item.trim() !== '').map(item => ({ value: item.trim() }));
        }
      },
      deep: true
    },
    current6: {
      handler(val) {
        if (val) {
          const findContentByDisposal = (disposalName) => {
            const item = this.guaranteeList.find(item => item.保障类型 === disposalName);
            return item ? item.保障内容 : "未找到匹配的处置内容";
          }
          this.guaranteeData = findContentByDisposal(val).split(/（\d+）/).filter(item => item.trim() !== '').map(item => ({ value: item.trim() }));
        }
      },
      deep: true
    },
    current7: {
      handler(val) {
        if (val) {
          const findContentByDisposal = (disposalName) => {
            const item = this.laterList.find(item => item.处置类型 === disposalName);
            return item ? item.处置内容 : "未找到匹配的处置内容";
          }
          this.laterData = findContentByDisposal(val).split(/（\d+）/).filter(item => item.trim() !== '').map(item => ({ value: item.trim() }));
        }
      },
      deep: true
    },
  },
  data() {
    return {
      resList: [{ 所属职责: "", 所属人员: "", 负责人所在单位: "", 负责人公司职位: "", 应急角色: "" },],
      // 备份数据
      backupResList: [],
      OwnedList: ["生产运行及通信联络组", "治安组", "物资供应组", "消防队", "抢险组", "医疗救护组", "应急监测组", "接待组", "专家组"],
      current: "应急救援指挥部",
      url: "http://10.199.98.2:8086/3DInterface_D/Business/EmergManage/Platform/yjya_xq_zsgc ",
      emergency: true,
      isOverflow: false,
      isEditing: false,
      response: true,
      tableData: [],
      tableData1: [],
      accident: true,
      accidentList: [],
      accidentList1: [],
      information: true,
      information1: true,
      informationList: [],
      informationList1: [],
      informationData: [{ value: "" }],
      informationData1: [],
      current1: "",
      warning: true,
      warning1: true,
      warningList: [],
      warningList1: [],
      warningData: [{ value: "" }],
      warningData1: [],
      current2: "",
      responseTo: true,
      responseToList: [],
      responseToList1: [],
      dispose: true,
      dispose1: true,
      disposeList: [],
      disposeList1: [],
      disposeData: [{ value: "" }],
      disposeData1: [],
      current3: "",
      support: true,
      support1: true,
      supportList: [],
      supportList1: [],
      supportData: [{ value: "" }],
      supportData1: [],
      current4: "",
      termination: true,
      termination1: true,
      terminationList: [],
      terminationList1: [],
      terminationData: [{ value: "" }],
      terminationData1: [],
      current5: "",
      guarantee: true,
      guarantee1: true,
      guaranteeList: [],
      guaranteeList1: [],
      guaranteeData: [{ value: "" }],
      guaranteeData1: [{ value: "" }],
      current6: "",

      later: true,
      later1: true,
      later2: true,
      laterList: [],
      laterList1: [],
      laterData: [{ value: "" }],
      laterData1: [{ value: "" }],
      current7: "",
      laterDataS: [{ 事项: "" }],
      laterDataS1: [{ 事项: "" }],
    }
  },
  methods: {
    async submit() {
      let booList = [false, false, false, false, false, false, false, false, false, false]
      let tableData = this.tableData.map(item =>
        `('${item.响应等级}','${item.等级名称}','${item.响应条件}','${item.影响范围}','${item.控制事态能力}','${item.应急预案启动级别}','${item.预警等级}','${item.指挥机构}')`
      ).join(',');
      const options1 = {
        method: 'POST',
        url: this.url,
        data: {
          TIP: 'delete',
          SQL: `delete from imp_emergmanage.emerg_level_rsp`
        }
      };
      await axios.request(options1).then(response => {
        if (response.data.message === "success") {
          const optionsAdd = {
            method: 'POST',
            url: this.url,
            data: {
              TIP: 'INSERT',
              SQL: `INSERT INTO imp_emergmanage.emerg_level_rsp (Level, LevelName, RespCondition, ImpactScope, ContainmentCapacity, PlanActivationLevel, WarnLevel, CommandLevel) VALUES ${tableData}`
            }
          };
          axios.request(optionsAdd).then(response => {
            if (response.data.message === "success") booList[0] = true
            else this.$message.error("修改失败");
          }).catch(function (error) {
            console.error(error);
          });
        }
      }).catch(function (error) {
        console.error(error);
      });
      let accidentList = this.accidentList.map(item =>
        `('${item.事故等级}','${item.事故等级名称}','${item.事故等级标准}','${item.事故等级颜色}')`
      ).join(',');
      const options2 = {
        method: 'POST',
        url: this.url,
        data: {
          TIP: 'delete',
          SQL: `delete from imp_emergmanage.emerg_level_acc_in`
        }
      };
      await axios.request(options2).then(response => {
        if (response.data.message === "success") {
          const optionsAdd = {
            method: 'POST',
            url: this.url,
            data: {
              TIP: 'INSERT',
              SQL: `INSERT INTO imp_emergmanage.emerg_level_acc_in (InLevel, InLevelName, InLevelStandard, InlevelColor) VALUES ${accidentList}`
            }
          };
          axios.request(optionsAdd).then(response => {
            if (response.data.message === "success") booList[1] = true
            else this.$message.error("修改失败");
          }).catch(function (error) {
            console.error(error);
          });
        }
      }).catch(function (error) {
        console.error(error);
      });
      // 信息报告
      let informationList = this.informationList.map(item =>
        `('${item.报告类型}','${item.报告内容}')`
      ).join(',');
      const options3 = {
        method: 'POST',
        url: this.url,
        data: {
          TIP: 'delete',
          SQL: `delete from imp_emergmanage.emerg_response_increport`
        }
      };
      await axios.request(options3).then(response => {
        if (response.data.message === "success") {
          const optionsAdd = {
            method: 'POST',
            url: this.url,
            data: {
              TIP: 'INSERT',
              SQL: `INSERT INTO imp_emergmanage.emerg_response_increport (ReportType, ReportContent) VALUES ${informationList}`
            }
          };
          axios.request(optionsAdd).then(response => {
            if (response.data.message === "success") booList[2] = true;
            else this.$message.error("修改失败");
          }).catch(function (error) {
            console.error(error);
          });
        }
      }).catch(function (error) {
        console.error(error);
      });
      let warningList = this.warningList.map(item =>
        `('${item.预警启动类型}','${item.预警启动内容}')`
      ).join(',');
      const options4 = {
        method: 'POST',
        url: this.url,
        data: {
          TIP: 'delete',
          SQL: `delete from imp_emergmanage.emerg_response_startwarn`
        }
      };
      await axios.request(options4).then(response => {
        if (response.data.message === "success") {
          const optionsAdd = {
            method: 'POST',
            url: this.url,
            data: {
              TIP: 'INSERT',
              SQL: `INSERT INTO imp_emergmanage.emerg_response_startwarn (StartType, StartContent) VALUES ${warningList}`
            }
          };
          axios.request(optionsAdd).then(response => {
            if (response.data.message === "success") booList[3] = true;
            else this.$message.error("修改失败");
          }).catch(function (error) {
            console.error(error);
          });
        }
      }).catch(function (error) {
        console.error(error);
      });

      // 响应启动
      let responseToList = this.responseToList.map(item =>
        `('${item.响应启动类型}','${item.响应启动内容}')`
      ).join(',');
      const options5 = {
        method: 'POST',
        url: this.url,
        data: {
          TIP: 'delete',
          SQL: `delete from imp_emergmanage.emerg_response_startrsp`
        }
      };
      await axios.request(options5).then(response => {
        if (response.data.message === "success") {
          const optionsAdd = {
            method: 'POST',
            url: this.url,
            data: {
              TIP: 'INSERT',
              SQL: `INSERT INTO imp_emergmanage.emerg_response_startrsp (StartType, StartContent) VALUES ${responseToList}`
            }
          };
          axios.request(optionsAdd).then(response => {
            if (response.data.message === "success") booList[4] = true;
            else this.$message.error("修改失败");
          }).catch(function (error) {
            console.error(error);
          });
        }
      }).catch(function (error) {
        console.error(error);
      });

      let disposeList = this.disposeList.map(item =>
        `('${item.处置类型}','${item.处置内容}')`
      ).join(',');
      const options6 = {
        method: 'POST',
        url: this.url,
        data: {
          TIP: 'delete',
          SQL: `delete from imp_emergmanage.emerg_response_deal`
        }
      };
      await axios.request(options6).then(response => {
        if (response.data.message === "success") {
          const optionsAdd = {
            method: 'POST',
            url: this.url,
            data: {
              TIP: 'INSERT',
              SQL: `INSERT INTO imp_emergmanage.emerg_response_deal (DealType, DealContent) VALUES ${disposeList}`
            }
          };
          axios.request(optionsAdd).then(response => {
            if (response.data.message === "success") booList[5] = true;
            else this.$message.error("修改失败");
          }).catch(function (error) {
            console.error(error);
          });
        }
      }).catch(function (error) {
        console.error(error);
      });

      let supportList = this.supportList.map(item =>
        `('${item.支援类型}','${item.支援内容}')`
      ).join(',');
      const options7 = {
        method: 'POST',
        url: this.url,
        data: {
          TIP: 'delete',
          SQL: `delete from imp_emergmanage.emerg_response_support`
        }
      };
      await axios.request(options7).then(response => {
        if (response.data.message === "success") {
          const optionsAdd = {
            method: 'POST',
            url: this.url,
            data: {
              TIP: 'INSERT',
              SQL: `INSERT INTO imp_emergmanage.emerg_response_support (SupportType, SupportContent) VALUES ${supportList}`
            }
          };
          axios.request(optionsAdd).then(response => {
            if (response.data.message === "success") booList[6] = true;
            else this.$message.error("修改失败");
          }).catch(function (error) {
            console.error(error);
          });
        }
      }).catch(function (error) {
        console.error(error);
      });

      let terminationList = this.terminationList.map(item =>
        `('${item.终止类型}','${item.终止内容}')`
      ).join(',');
      const options8 = {
        method: 'POST',
        url: this.url,
        data: {
          TIP: 'delete',
          SQL: `delete from imp_emergmanage.emerg_response_end`
        }
      };
      await axios.request(options8).then(response => {
        if (response.data.message === "success") {
          const optionsAdd = {
            method: 'POST',
            url: this.url,
            data: {
              TIP: 'INSERT',
              SQL: `INSERT INTO imp_emergmanage.emerg_response_end (EndType, EndContent) VALUES ${terminationList}`
            }
          };
          axios.request(optionsAdd).then(response => {
            if (response.data.message === "success") booList[7] = true;
            else this.$message.error("修改失败");
          }).catch(function (error) {
            console.error(error);
          });
        }
      }).catch(function (error) {
        console.error(error);
      });

      let guaranteeList = this.guaranteeList.map(item =>
        `('${item.保障类型}','${item.保障内容}')`
      ).join(',');
      const options9 = {
        method: 'POST',
        url: this.url,
        data: {
          TIP: 'delete',
          SQL: `delete from imp_emergmanage.emerg_ensure`
        }
      };
      await axios.request(options9).then(response => {
        if (response.data.message === "success") {
          const optionsAdd = {
            method: 'POST',
            url: this.url,
            data: {
              TIP: 'INSERT',
              SQL: `INSERT INTO imp_emergmanage.emerg_ensure (EnsureType, EnsureContnet) VALUES ${guaranteeList}`
            }
          };
          axios.request(optionsAdd).then(response => {
            if (response.data.message === "success") booList[8] = true;
            else this.$message.error("修改失败");
          }).catch(function (error) {
            console.error(error);
          });
        }
      }).catch(function (error) {
        console.error(error);
      });

      let laterList = this.laterList.map(item =>
        `('${item.事项}','${item.处置类型}','${item.处置内容}')`
      ).join(',');
      const options10 = {
        method: 'POST',
        url: this.url,
        data: {
          TIP: 'delete',
          SQL: `delete from imp_emergmanage.emerg_enddeal`
        }
      };
      await axios.request(options10).then(response => {
        if (response.data.message === "success") {
          const optionsAdd = {
            method: 'POST',
            url: this.url,
            data: {
              TIP: 'INSERT',
              SQL: `INSERT INTO imp_emergmanage.emerg_enddeal (DealItem,DealType, DealContent) VALUES ${laterList}`
            }
          };
          axios.request(optionsAdd).then(response => {
            if (response.data.message === "success") booList[9] = true;
            else this.$message.error("修改失败");
          }).catch(function (error) {
            console.error(error);
          });
        }
      }).catch(function (error) {
        console.error(error);
      });
      setTimeout(() => {
        const allTrue = booList.every(Boolean);
        this.$message.success("修改成功");
        this.getList()
      }, 500);

    },
    async getType(val) {
      const options = {
        method: 'POST',
        url: this.url,
        data: {
          TIP: 'select',
          SQL: `select OwnedBy '所属', OwnedByDuty '所属职责', OwnedByCrew '所属人员', Unit '负责人所在单位', Title '负责人公司职位', role '应急角色', RoleDuty '应急角色职责'
                            from imp_emergmanage.emerg_rescue_orgduty where OwnedBy = '${val}'`
        }
      };
      await axios.request(options).then(response => {
        let data = response.data.data;
        data.forEach(item => {
          item.所属职责1 = item.所属职责.replace(/（\d+）/g, "<br>$&");
          item.应急角色职责 = item.应急角色职责 || '';
        });
        this.resList = data
        // 获取数据后备份
        this.backupResList = JSON.parse(JSON.stringify(data));
      }).catch(function (error) {
        console.error(error);
      });
    },
    async handlerClick(type, status, index) {
      if (type === '应急组织机构及职责') {
        if (status === '编辑') {
          this.emergency = false
          this.isEditing = true
        }
        if (status === '完成') {
          let resList = this.resList.map(item =>
            `('${item.所属}','${item.所属职责}','${item.所属人员}','${item.负责人所在单位}','${item.负责人公司职位}','${item.应急角色}','${item.应急角色职责}')`
          ).join(',');
          const options = {
            method: 'POST',
            url: this.url,
            data: {
              TIP: 'delete',
              SQL: `delete from imp_emergmanage.emerg_rescue_orgduty where OwnedBy = '${this.current}'`
            }
          };
          await axios.request(options).then(response => {
            if (response.data.message === "success") {
              const optionsAdd = {
                method: 'POST',
                url: this.url,
                data: {
                  TIP: 'INSERT',
                  SQL: `INSERT INTO imp_emergmanage.emerg_rescue_orgduty (OwnedBy, OwnedByDuty, OwnedByCrew, Unit, Title, Role, RoleDuty) VALUES ${resList}`
                }
              };
              axios.request(optionsAdd).then(response => {
                if (response.data.message === "success") {
                  this.$message.success("修改成功");
                  this.emergency = true
                  this.isEditing = false
                  this.getType(this.current)
                } else this.$message.error("修改失败");
              }).catch(function (error) {
                console.error(error);
              });
            }
          }).catch(function (error) {
            console.error(error);
          });
        }
        if (status === '取消') {
          this.emergency = true
          this.isEditing = false
          // 恢复备份数据
          this.resList = JSON.parse(JSON.stringify(this.backupResList));
        }
        if (status === '添加') {
          let res = this.resList
          this.resList.push({ 所属: res[0].所属, 所属职责: res[0].所属职责, 所属人员: res[0].所属人员, 负责人所在单位: "", 负责人公司职位: "", 应急角色: "" })
        }
        if (status === '删除') this.resList.splice(index, 1)
      } else if (type === '响应分级') {
        if (status === '编辑') this.response = false
        if (status === '完成') {
          this.response = true
          this.tableData1 = JSON.parse(JSON.stringify(this.tableData));
        }
        if (status === '取消') {
          this.response = true
          this.tableData = JSON.parse(JSON.stringify(this.tableData1));
        }
      } else if (type === '内容事故分级') {
        if (status === '编辑') this.accident = false
        if (status === '完成') {
          this.accident = true
          this.accidentList1 = JSON.parse(JSON.stringify(this.accidentList));
        }
        if (status === '取消') {
          this.accident = true
          this.accidentList = JSON.parse(JSON.stringify(this.accidentList1));
        }
      } else if (type === '响应启动') {
        if (status === '编辑') this.responseTo = false
        if (status === '完成') {
          this.responseTo = true
          this.responseToList1 = JSON.parse(JSON.stringify(this.responseToList));
        }
        if (status === '取消') {
          this.responseTo = true
          this.responseToList = JSON.parse(JSON.stringify(this.responseToList1));
        }
      }
    },
    clickChange(type, status, index) {
      if (type === '信息报告') {
        if (status === '编辑') this.information = false
        if (status === '完成') {
          this.information = true
          this.informationList1 = JSON.parse(JSON.stringify(this.informationList));
        }
        if (status === '取消') {
          this.information = true
          this.informationList = JSON.parse(JSON.stringify(this.informationList1));
        } if (status === '添加') {
          this.informationList.push({ 报告类型: "", 报告内容: "x" })
        } if (status === '删除') {
          if (index >= 0 && index < this.informationList.length) {
            this.informationList.splice(index, 1);
          }
        }
      } else if (type === '信息报告1') {
        if (status === '编辑') this.information1 = false
        if (status === '完成') {
          this.information1 = true
          this.informationData1 = JSON.parse(JSON.stringify(this.informationData));
          let text = this.informationData.map((item, index) => `（${index + 1}）${item.value}`).join('');
          let result = this.informationList.filter(item =>
            item.报告类型 && item.报告类型.includes(this.current1)
          );
          this.informationList = this.informationList.map(item => {
            if (item.报告类型 === this.current1) {
              return {
                ...item,
                报告内容: text
              };
            }
            return item;
          });
        }
        if (status === '取消') {
          this.information1 = true
          this.informationData = JSON.parse(JSON.stringify(this.informationData1));
        } if (status === '添加') {
          this.informationData.push({ 报告类型: "" })
        } if (status === '删除') {
          if (index >= 0 && index < this.informationData.length) {
            this.informationData.splice(index, 1);
          }
        }
      } else if (type === '预警启动') {
        if (status === '编辑') this.warning = false
        if (status === '完成') {
          this.warning = true
          this.warningList1 = JSON.parse(JSON.stringify(this.warningList));
        }
        if (status === '取消') {
          this.warning = true
          this.warningList = JSON.parse(JSON.stringify(this.warningList1));
        } if (status === '添加') {
          this.warningList.push({ 预警启动类型: "", 预警启动内容: "x" })
        } if (status === '删除') {
          console.log(index, this.warningList)
          if (index >= 0 && index < this.warningList.length) {
            this.warningList.splice(index, 1);
          }
        }
      } else if (type === '预警启动1') {
        if (status === '编辑') this.warning1 = false
        if (status === '完成') {
          this.warning1 = true
          this.warningData1 = JSON.parse(JSON.stringify(this.warningData));
          let text = this.warningData.map((item, index) => `（${index + 1}）${item.value}`).join('');
          let result = this.warningList.filter(item =>
            item.预警启动类型 && item.预警启动类型.includes(this.current1)
          );
          this.warningList = this.warningList.map(item => {
            if (item.预警启动类型 === this.current2) {
              return {
                ...item,
                预警启动内容: text
              };
            }
            return item;
          });
        }
        if (status === '取消') {
          this.warning1 = true
          this.warningData = JSON.parse(JSON.stringify(this.warningData1));
        } if (status === '添加') {
          this.warningData.push({ 预警启动类型: "" })
        } if (status === '删除') {
          if (index >= 0 && index < this.warningData.length) {
            this.warningData.splice(index, 1);
          }
        }
      } else if (type === '应急处置') {
        if (status === '编辑') this.dispose = false
        if (status === '完成') {
          this.dispose = true
          this.disposeList1 = JSON.parse(JSON.stringify(this.disposeList));
        }
        if (status === '取消') {
          this.dispose = true
          this.disposeList = JSON.parse(JSON.stringify(this.disposeList1));
        } if (status === '添加') {
          this.disposeList.push({ 处置类型: "", 处置内容: "x" })
        } if (status === '删除') {
          if (index >= 0 && index < this.disposeList.length) {
            this.disposeList.splice(index, 1);
          }
        }
      } else if (type === '应急处置1') {
        if (status === '编辑') this.dispose1 = false
        if (status === '完成') {
          this.dispose1 = true
          this.disposeData1 = JSON.parse(JSON.stringify(this.disposeData));
          let text = this.disposeData.map((item, index) => `（${index + 1}）${item.value}`).join('');
          let result = this.disposeList.filter(item =>
            item.处置类型 && item.处置类型.includes(this.current3)
          );
          this.disposeList = this.disposeList.map(item => {
            if (item.处置类型 === this.current3) {
              return {
                ...item,
                处置内容: text
              };
            }
            return item;
          });
        }
        if (status === '取消') {
          this.dispose1 = true
          this.disposeData = JSON.parse(JSON.stringify(this.disposeData1));
        } if (status === '添加') {
          this.disposeData.push({ 处置类型: "" })
        } if (status === '删除') {
          if (index >= 0 && index < this.disposeData.length) {
            this.disposeData.splice(index, 1);
          }
        }
      } else if (type === '应急支援') {
        if (status === '编辑') this.support = false
        if (status === '完成') {
          this.support = true
          this.supportList1 = JSON.parse(JSON.stringify(this.supportList));
        }
        if (status === '取消') {
          this.support = true
          this.supportList = JSON.parse(JSON.stringify(this.supportList1));
        } if (status === '添加') {
          this.supportList.push({ 支援类型: "", 支援内容: "x" })
        } if (status === '删除') {
          if (index >= 0 && index < this.supportList.length) {
            this.supportList.splice(index, 1);
          }
        }
      } else if (type === '应急支援1') {
        if (status === '编辑') this.support1 = false
        if (status === '完成') {
          this.support1 = true
          this.supportData1 = JSON.parse(JSON.stringify(this.supportData));
          let text = this.supportData.map((item, index) => `（${index + 1}）${item.value}`).join('');
          let result = this.supportList.filter(item =>
            item.支援类型 && item.支援类型.includes(this.current4)
          );
          this.supportList = this.supportList.map(item => {
            if (item.支援类型 === this.current4) {
              return {
                ...item,
                支援内容: text
              };
            }
            return item;
          });
        }
        if (status === '取消') {
          this.support1 = true
          this.supportData = JSON.parse(JSON.stringify(this.supportData1));
        } if (status === '添加') {
          this.supportData.push({ 支援类型: "" })
        } if (status === '删除') {
          if (index >= 0 && index < this.supportData.length) {
            this.supportData.splice(index, 1);
          }
        }
      } else if (type === '响应终止') {
        if (status === '编辑') this.termination = false
        if (status === '完成') {
          this.termination = true
          this.terminationList1 = JSON.parse(JSON.stringify(this.terminationList));
        }
        if (status === '取消') {
          this.termination = true
          this.terminationList = JSON.parse(JSON.stringify(this.terminationList1));
        } if (status === '添加') {
          this.terminationList.push({ 终止类型: "", 终止内容: "x" })
        } if (status === '删除') {
          if (index >= 0 && index < this.terminationList.length) {
            this.terminationList.splice(index, 1);
          }
        }
      } else if (type === '响应终止1') {
        if (status === '编辑') this.termination1 = false
        if (status === '完成') {
          this.termination1 = true
          this.terminationData1 = JSON.parse(JSON.stringify(this.terminationData));
          let text = this.terminationData.map((item, index) => `（${index + 1}）${item.value}`).join('');
          let result = this.terminationList.filter(item =>
            item.终止类型 && item.终止类型.includes(this.current5)
          );
          this.terminationList = this.terminationList.map(item => {
            if (item.终止类型 === this.current5) {
              return {
                ...item,
                终止内容: text
              };
            }
            return item;
          });
        }
        if (status === '取消') {
          this.termination1 = true
          this.terminationData = JSON.parse(JSON.stringify(this.terminationData1));
        } if (status === '添加') {
          this.terminationData.push({ 终止类型: "" })
        } if (status === '删除') {
          if (index >= 0 && index < this.terminationData.length) {
            this.terminationData.splice(index, 1);
          }
        }
      } else if (type === '应急保障') {
        if (status === '编辑') this.guarantee = false
        if (status === '完成') {
          this.guarantee = true
          this.guaranteeList1 = JSON.parse(JSON.stringify(this.guaranteeList));
        }
        if (status === '取消') {
          this.guarantee = true
          this.guaranteeList = JSON.parse(JSON.stringify(this.guaranteeList1));
        } if (status === '添加') {
          this.guaranteeList.push({ 保障类型: "", 保障内容: "x" })
        } if (status === '删除') {
          if (index >= 0 && index < this.guaranteeList.length) {
            this.guaranteeList.splice(index, 1);
          }
        }
      } else if (type === '应急保障1') {
        if (status === '编辑') this.guarantee1 = false
        if (status === '完成') {
          this.guarantee1 = true
          this.guaranteeData1 = JSON.parse(JSON.stringify(this.guaranteeData));
          let text = this.guaranteeData.map((item, index) => `（${index + 1}）${item.value}`).join('');
          let result = this.guaranteeList.filter(item =>
            item.保障类型 && item.保障类型.includes(this.current6)
          );
          this.guaranteeList = this.guaranteeList.map(item => {
            if (item.保障类型 === this.current6) {
              return {
                ...item,
                保障内容: text
              };
            }
            return item;
          });
        }
        if (status === '取消') {
          this.guarantee1 = true
          this.guaranteeData = JSON.parse(JSON.stringify(this.guaranteeData1));
        } if (status === '添加') {
          this.guaranteeData.push({ 保障内容: "" })
        } if (status === '删除') {
          if (index >= 0 && index < this.guaranteeData.length) {
            this.guaranteeData.splice(index, 1);
          }
        }
      } else if (type === '后期处置') {
        if (status === '编辑') this.later = false
        if (status === '完成') {
          this.later = true
          this.laterList1 = JSON.parse(JSON.stringify(this.laterList));
        }
        if (status === '取消') {
          this.later = true
          this.laterList = JSON.parse(JSON.stringify(this.laterList1));
        } if (status === '添加') {
          this.laterList.push({ 处置类型: "", 处置内容: "x" })
        } if (status === '删除') {
          if (index >= 0 && index < this.laterList.length) {
            this.laterList.splice(index, 1);
          }
        }
      } else if (type === '后期处置1') {
        if (status === '编辑') this.later1 = false
        else if (status === '完成') {
          this.later1 = true
          this.laterData1 = JSON.parse(JSON.stringify(this.laterData));
          let text = this.laterData.map((item, index) => `（${index + 1}）${item.value}`).join('');
          let result = this.laterList.filter(item =>
            item.处置类型 && item.处置类型.includes(this.current7)
          );
          this.laterList = this.laterList.map(item => {
            if (item.处置类型 === this.current7) {
              return {
                ...item,
                处置内容: text
              };
            }
            return item;
          });
        }
        else if (status === '添加') {
          this.laterData.push({ 处置内容: "" })
        }
        if (status === '删除') {
          if (index >= 0 && index < this.laterData.length) {
            this.laterData.splice(index, 1);
          }
        }
        else if (status === '取消') {
          this.later1 = true
          this.laterData = JSON.parse(JSON.stringify(this.laterData1));
        }
      } else if (type === '后期处置2') {
        if (status === '编辑') this.later2 = false
        else if (status === '完成') {
          this.later2 = true
          this.laterDataS1 = JSON.parse(JSON.stringify(this.laterDataS));
          let text = this.laterDataS.map((item, index) => `（${index + 1}）${item.事项}`).join('');
          // text = "后期处置事项：" + text
          this.laterList = this.laterList.map(item => ({
            ...item,
            事项: text,
          }));
          console.log(this.laterList)
        }
        else if (status === '添加') {
          this.laterDataS.push({ 事项: "" })
        }
        if (status === '删除') {
          if (index >= 0 && index < this.laterDataS.length) {
            this.laterDataS.splice(index, 1);
          }
        }
        else if (status === '取消') {
          this.later2 = true
          this.laterDataS = JSON.parse(JSON.stringify(this.laterDataS1));
        }
      }
    },
    async getList() {
      // 响应分级
      const options1 = {
        method: 'POST',
        url: this.url,
        data: {
          TIP: 'select',
          SQL: `select level '响应等级', LevelName '等级名称' , RespCondition '响应条件', ImpactScope '影响范围',
                ContainmentCapacity '控制事态能力', PlanActivationLevel '应急预案启动级别',WarnLevel '预警等级', CommandLevel '指挥机构'
                from imp_emergmanage.emerg_level_rsp  ORDER BY FIELD(level, 'Ⅰ级响应', 'Ⅱ级响应', 'Ⅲ级响应', 'Ⅳ级响应')`
        }
      };
      await axios.request(options1).then(response => {
        let data = response.data.data;
        // 深拷贝数据
        this.tableData1 = JSON.parse(JSON.stringify(data));
        this.tableData = JSON.parse(JSON.stringify(data));
      }).catch(function (error) {
        console.error(error);
      });
      // 内容事故分级
      const options2 = {
        method: 'POST',
        url: this.url,
        data: {
          TIP: 'select',
          SQL: `select InLevel '事故等级', InLevelName '事故等级名称', InLevelStandard '事故等级标准', InlevelColor '事故等级颜色'
                from imp_emergmanage.emerg_level_acc_in ORDER BY FIELD(InLevel, 'Ⅰ级', 'Ⅱ级', 'Ⅲ级', 'Ⅳ级')`
        }
      };
      await axios.request(options2).then(response => {
        let data = response.data.data;
        this.accidentList = JSON.parse(JSON.stringify(data));
        this.accidentList1 = JSON.parse(JSON.stringify(data));
        console.log(data)
      }).catch(function (error) {
        console.error(error);
      });
      // 信息报告
      const options3 = {
        method: 'POST',
        url: this.url,
        data: {
          TIP: 'select',
          SQL: `select ReportType '报告类型', ReportContent '报告内容' from imp_emergmanage.emerg_response_increport`
        }
      };
      await axios.request(options3).then(response => {
        let data = response.data.data;
        let current = data[0].报告类型
        this.informationList = data
        this.current1 = current
        this.informationData = data[0].报告内容.split(/（\d+）/).filter(item => item.trim() !== '').map(item => ({ value: item.trim() }));
        this.informationData1 = data[0].报告内容.split(/（\d+）/).filter(item => item.trim() !== '').map(item => ({ value: item.trim() }));
        this.informationList1 = JSON.parse(JSON.stringify(data));
      }).catch(function (error) {
        console.error(error);
      });
      // 预警启动
      const options4 = {
        method: 'POST',
        url: this.url,
        data: {
          TIP: 'select',
          SQL: `select StartType '预警启动类型', StartContent '预警启动内容' from imp_emergmanage.emerg_response_startwarn`
        }
      };
      await axios.request(options4).then(response => {
        let data = response.data.data;
        let current = data[0].预警启动类型
        this.warningList = data
        this.current2 = current
        this.warningData = data[0].预警启动内容.split(/（\d+）/).filter(item => item.trim() !== '').map(item => ({ value: item.trim() }));
        this.warningData1 = data[0].预警启动内容.split(/（\d+）/).filter(item => item.trim() !== '').map(item => ({ value: item.trim() }));
        this.warningList1 = JSON.parse(JSON.stringify(data));
      }).catch(function (error) {
        console.error(error);
      });
      // 响应启动
      const options5 = {
        method: 'POST',
        url: this.url,
        data: {
          TIP: 'select',
          SQL: `select StartType '响应启动类型', StartContent '响应启动内容' from imp_emergmanage.emerg_response_startrsp`
        }
      };
      await axios.request(options5).then(response => {
        let data = response.data.data;
        this.responseToList = JSON.parse(JSON.stringify(data))
        this.responseToList1 = JSON.parse(JSON.stringify(data))
      }).catch(function (error) {
        console.error(error);
      });

      // 应急处置
      const options6 = {
        method: 'POST',
        url: this.url,
        data: {
          TIP: 'select',
          SQL: `select DealType '处置类型', DealContent '处置内容' from imp_emergmanage.emerg_response_deal`
        }
      };
      await axios.request(options6).then(response => {
        let data = response.data.data;
        let current = data[0].处置类型

        this.disposeList = data
        this.current3 = current
        this.disposeData = data[0].处置内容.split(/（\d+）/).filter(item => item.trim() !== '').map(item => ({ value: item.trim() }));
        this.disposeData1 = data[0].处置内容.split(/（\d+）/).filter(item => item.trim() !== '').map(item => ({ value: item.trim() }));
        this.disposeList1 = JSON.parse(JSON.stringify(data));
      }).catch(function (error) {
        console.error(error);
      });

      // 应急支援
      const options7 = {
        method: 'POST',
        url: this.url,
        data: {
          TIP: 'select',
          SQL: `select SupportType '支援类型', SupportContent '支援内容' from imp_emergmanage.emerg_response_support`
        }
      };
      await axios.request(options7).then(response => {
        let data = response.data.data;
        let current = data[0].支援类型
        this.supportList = data
        this.current4 = current
        this.supportData = data[0].支援内容.split(/（\d+）/).filter(item => item.trim() !== '').map(item => ({ value: item.trim() }));
        this.supportData1 = data[0].支援内容.split(/（\d+）/).filter(item => item.trim() !== '').map(item => ({ value: item.trim() }));
        this.supportList1 = JSON.parse(JSON.stringify(data));
      }).catch(function (error) {
        console.error(error);
      });

      // 响应终止
      const options8 = {
        method: 'POST',
        url: this.url,
        data: {
          TIP: 'select',
          SQL: `select EndType '终止类型', EndContent '终止内容' from imp_emergmanage.emerg_response_end`
        }
      };
      await axios.request(options8).then(response => {
        let data = response.data.data;
        let current = data[0].终止类型
        this.terminationList = data
        this.current5 = current
        this.terminationData = data[0].终止内容.split(/（\d+）/).filter(item => item.trim() !== '').map(item => ({ value: item.trim() }));
        this.terminationData1 = data[0].终止内容.split(/（\d+）/).filter(item => item.trim() !== '').map(item => ({ value: item.trim() }));
        this.terminationList1 = JSON.parse(JSON.stringify(data));
      }).catch(function (error) {
        console.error(error);
      });

      // 应急保障
      const options9 = {
        method: 'POST',
        url: this.url,
        data: {
          TIP: 'select',
          SQL: `select EnsureType '保障类型', EnsureContnet '保障内容' from imp_emergmanage.emerg_ensure`
        }
      };
      await axios.request(options9).then(response => {
        let data = response.data.data;
        let current = data[0].保障类型
        this.guaranteeList = data
        this.current6 = current
        this.guaranteeData = data[0].保障内容.split(/（\d+）/).filter(item => item.trim() !== '').map(item => ({ value: item.trim() }));
        this.guaranteeData1 = data[0].保障内容.split(/（\d+）/).filter(item => item.trim() !== '').map(item => ({ value: item.trim() }));
        this.guaranteeList1 = JSON.parse(JSON.stringify(data));
      }).catch(function (error) {
        console.error(error);
      });

      // 后期处置
      const options10 = {
        method: 'POST',
        url: this.url,
        data: {
          TIP: 'select',
          SQL: `select DealItem '事项', DealType '处置类型', DealContent '处置内容' from imp_emergmanage.emerg_enddeal`
        }
      };
      await axios.request(options10).then(response => {
        let data = response.data.data;
        let current = data[0].处置类型
        this.laterList = data
        this.current7 = current
        this.laterData = data[0].处置内容.split(/（\d+）/).filter(item => item.trim() !== '').map(item => ({ value: item.trim() }));
        this.laterData1 = data[0].处置内容.split(/（\d+）/).filter(item => item.trim() !== '').map(item => ({ value: item.trim() }));
        this.laterList1 = JSON.parse(JSON.stringify(data));

        const content = data[0].事项.replace(/^后期处置事项：/, "");
        this.laterDataS = content.split(/（\d+）/).filter(item => item.trim() !== '').map(item => ({ 事项: item.trim() }));
        this.laterDataS1 = content.split(/（\d+）/).filter(item => item.trim() !== '').map(item => ({ 事项: item.trim() }));
      }).catch(function (error) {
        console.error(error);
      });
    },
    checkOverflow(val, text) {
      if (val.length > 85) {
        if (text === '移入') this.isOverflow = true;
        else this.isOverflow = false;
      }
    },
  },
  mounted() {
    this.getType(this.current)
    this.getList()
  },
}
</script>
<style lang="scss" scoped>
.comprehensive {
  width: 100%;
  padding: 24px 0;
  font-family: "Source Han Sans CN";
  font-style: normal;

  &>div {
    width: (1672 / 1720) * 100%;
    margin: 0 auto;
  }

  .flex {
    display: flex;
    justify-content: space-between;
  }

  .Btn {
    height: 36px;

    .submit {
      margin-right: 32px;
      width: 80px;
      height: 36px;
      line-height: 36px;
      border-radius: 4px;
      background: #165DFF;
      text-align: center;
      color: #FFF;
      font-size: 14px;
      font-weight: 700;

      &:hover {
        cursor: pointer;
      }
    }
  }

  .title {
    color: #163154;
    font-size: 20px;
    font-weight: 700;
    line-height: 22px;
    text-align: left;
  }

  .on_title {
    margin: 16px auto;
    padding-left: 24px;
    text-align: left;
    color: #678BDB;
    font-size: 19px;
    font-weight: 500;
    line-height: 28px;
  }

  .Line {
    height: 1px;
    background: #165DFF;
    margin-top: 40px;
    margin-bottom: 32px;
  }

  .responsibility {
    margin-top: 32px;
    height: 386px;
    padding: 0 48px;

    .responsibility_1 {
      width: 688px;
      height: 386px;

      .top {
        width: 688px;
        height: 124px;
        border-radius: 3.583px;
        border: 2px solid #165DFF;
        font-size: 14px;
        color: #6A788D;

        .Owned {
          margin-top: 30px;
          margin-left: 213px;
          width: 247px;
          height: 64px;
          padding: 12px 30px;
          border-radius: 3.583px;
          border: 2px solid #165DFF;
          font-weight: 500;
          line-height: 20px;

          &.disabled {
            color: #cccccc;
            border-color: #cccccc;
            cursor: not-allowed;
          }

          &:hover {
            cursor: pointer;
          }
        }

        .arrow {
          margin-top: 57px;
          width: 50px;
          height: 20px;
          background: url('~@/assets/images/应急管理页面/2.png') no-repeat;
          background-size: contain;
        }

        .text {
          margin: 48.5px 48.5px 0 0;
          width: 113px;
          height: 27px;
          line-height: 27px;
          border-radius: 3.583px;
          text-align: center;
          border: 2px solid #6A788D;
          font-size: 14px;
          font-weight: 500;

          &:hover {
            cursor: pointer;
          }
        }
      }

      .mid {
        width: 688px;
        height: 76px;
        background: url('~@/assets/images/应急管理页面/1.png') no-repeat 15px 0;
        background-size: contain;
      }

      .bottom {
        width: 688px;
        height: 183px;

        &>div {
          width: 43px;
          height: 183px;
          border-radius: 3.583px;
          border: 2px solid #165DFF;
          color: #6A788D;
          text-align: center;
          font-size: 14px;
          font-weight: 500;
          writing-mode: vertical-rl;
          text-orientation: mixed;
          display: flex;
          align-items: center;
          justify-content: center;
          letter-spacing: 2px;

          &:hover {
            cursor: pointer;
          }
        }

        .active {
          background: rgba(22, 93, 255, 0.20);
          color: #4A5667;
        }

        .disabled {
          border-color: #cccccc;
          color: #cccccc;
          cursor: not-allowed !important;
        }
      }
    }

    .responsibility_2 {
      width: (835 / 1672) * 100%;
      height: 386px;
      border-top: 2px solid rgba(22, 93, 255, 0.50);
      border-bottom: 2px solid rgba(22, 93, 255, 0.50);

      .List {
        height: 65px;
        border-bottom: 1px solid rgba(22, 93, 255, 0.50);
        position: relative;

        .List_title {
          width: (139 / 835) * 100%;
          background: rgba(22, 93, 255, 0.20);
          color: #165DFF;
          font-size: 14.325px;
          font-weight: 700;
          line-height: 65px;
          text-align: center;
        }

        .List_con {
          width: (670 / 835) * 100%;
          margin-right: 10px;
          height: 65px;
          padding: 5px 0;
          color: #6A788D;
          font-size: 14.325px;
          font-weight: 500;
          line-height: 30px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .hover_con {
          position: absolute;
          left: (139 / 835) * 100%;
          bottom: 51px;
          padding: 5px;
          background-color: rgba(48, 49, 51, .7);
          color: #FFF;
          font-size: 12px;
          border-radius: 3px;
        }
      }

      .resList {
        width: 100%;
        height: 255px;
        overflow-x: hidden;
        overflow: auto;

        &::-webkit-scrollbar {
          width: 6px;
        }

        &::-webkit-scrollbar-thumb {
          background: #165DFF;
          border-radius: 13px;
        }

        .resList_title {
          width: (139 / 835) * 100%;
          background: rgba(22, 93, 255, 0.05);
          color: #6A788D;
          font-size: 14.325px;
          font-weight: 500;
          text-align: center;
        }

        .resList_con {
          width: (139 / 835) * 100%;
          color: #6A788D;
          font-size: 14.325px;
          font-weight: 500;
          text-align: center;
        }

        .resList_cons,
        .resList_hidden {
          width: (670 / 835) * 100%;
          margin-right: 10px;
          height: 65px;
          padding: 5px 0;
          color: #6A788D;
          font-size: 14.325px;
          font-weight: 500;
          line-height: 30px;
          display: flex;
          justify-content: space-between;
        }

        .resList_hidden {
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .resList_1 {
          width: 100%;
          height: 126px;
          border-bottom: 1px solid rgba(22, 93, 255, 0.50);
          // background-color: rgba($color: #000000, $alpha: .2);

          &:last-child {
            border-bottom: none;
          }

          .resList_List {
            height: 63px;
            border-bottom: 1px solid rgba(22, 93, 255, 0.50);

            &:last-child {
              border-bottom: none;
            }

            .resList_title,
            .resList_con {
              line-height: 63px;
            }
          }
        }

        .resList_2 {
          width: 100%;
          height: 254px;


          .resList_List {
            height: 127px;
            border-bottom: 1px solid rgba(22, 93, 255, 0.50);

            &:last-child {
              border-bottom: none;
            }

            .resList_title,
            .resList_con {
              line-height: 127px;
            }
          }
        }
      }
    }

    ::v-deep .resList_con .el-input {
      width: 90% !important;
    }

    ::v-deep .el-input--medium .el-input__inner {
      height: 50px;
      line-height: 50px;
    }

    ::v-deep .el-icon-close {
      line-height: 50px;
      font-size: 15px;

      &:hover {
        cursor: pointer;
      }
    }

    .resList_conB {
      width: (670 / 835) * 100%;
      padding: 5px 0;
      display: flex;
      justify-content: space-between;

      ::v-deep .el-icon-close {
        line-height: 110px;
      }
    }

    ::v-deep .resList_conB .el-input,
    .resList_cons .el-input {
      width: 95% !important;
    }

    ::v-deep .resList_conB .el-input--medium .el-input__inner {
      margin-top: 30px;
      height: 50px;
    }

  }

  .editBtn {
    margin-top: 15px;

    .edit {
      margin-left: 92%;
      width: 68px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      border-radius: 4px;
      background: #165DFF;
      color: #FFF;
      font-size: 14px;
      font-weight: 700;

      &:hover {
        cursor: pointer;
      }
    }

    .btnList {
      margin-left: 85%;
      width: 216px;

      &>div {
        width: 68px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        border-radius: 4px;
        border: 1px solid #165DFF;
        color: rgba(22, 93, 255, 0.70);
        text-align: center;
        font-size: 14px;
        font-weight: 350;

        &:nth-child(1) {
          background: #165DFF;
          color: #FFF;
          font-size: 14px;
          font-weight: 700;
        }


        &:hover {
          cursor: pointer;
        }
      }
    }
  }

  .response {
    width: (1624 / 1720) * 100%;
    color: #6A788D;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
  }

  .table {
    margin-top: 16px;
    width: (1608 / 1720) * 100%;
    height: 432px;
    border-radius: 1.792px;
    background: rgba(22, 93, 255, 0.05);
    padding-top: 16px;

    .edit {
      margin-left: 94%;
    }

    .btnList {
      margin-left: 90%;
      width: 142px;
    }

    &>div {
      width: (1560 / 1608) * 100%;
      height: 400px;
      margin: 0 auto;
      border-top: 2px solid #165DFF;
      border-bottom: 2px solid #165DFF;
    }

    ::v-deep .el-table th {
      padding: 0;
      height: 56px !important;
      line-height: 56px;
      font-size: 14px;
      font-weight: 500;
      background: rgba(22, 93, 255, 0.20);
      color: #165DFF;
      text-overflow: ellipsis;
      font-size: 14.325px;
      font-weight: 700;
    }

    ::v-deep .el-table {
      color: #6A788D;
      font-size: 14.325px;
      font-weight: 500;
    }

    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-track {
      background: rgba($color: #165DFF, $alpha: .3);
    }

    ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
      width: 6px;
      opacity: 0.5;
    }

    ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
      border-radius: 13px;
      background: #165DFF;
    }
  }

  .accident {
    width: (1608 / 1720) * 100%;
    border-radius: 1.792px;
    background: rgba(22, 93, 255, 0.05);
    height: 272px;
    padding-top: 16px;

    &>div {
      width: (1560 / 1608) * 100%;
      height: 240px;
      margin: 0 auto;
      border-top: 2px solid #165DFF;
      border-bottom: 2px solid #165DFF;
    }

    .accident_title {
      height: 56px;
      line-height: 56px;
      color: #1D2129;
      font-size: 14px;
      font-weight: 500;

      &>div {
        width: (350 / 1560) * 100%;
        text-align: center;

        &:nth-child(1) {
          width: (160 / 1560) * 100%;
          background: rgba(22, 93, 255, 0.20);
          text-align: center;
          color: #165DFF;
          text-overflow: ellipsis;
          font-weight: 700;
        }

        &:nth-child(2) {
          background: rgba(255, 22, 22, 0.20);
        }

        &:nth-child(3) {
          background: rgba(255, 181, 22, 0.50);
        }

        &:nth-child(4) {
          background: rgba(255, 224, 48, 0.20);
        }

        &:nth-child(5) {
          background: rgba(76, 186, 255, 0.20);
        }
      }
    }

    .accident_content {
      height: 120px;
      color: #1D2129;
      font-size: 14px;
      font-weight: 500;

      &>div {
        width: (350 / 1560) * 100%;
        color: #6A788D;
        text-align: left;
        font-size: 14.325px;
        font-weight: 500;
        padding: 30px 15px;

        &:nth-child(1) {
          width: (160 / 1560) * 100%;
          line-height: 60px;
        }
      }

      ::v-deep .el-input {
        margin-top: 10px;
        width: 90% !important;
      }
    }

    .edit {
      margin-left: 94%;
    }

    .btnList {
      margin-left: 90%;
      width: 142px;
    }
  }

  .information {
    width: (1608 / 1720) * 100%;
    height: 378px;
    border-radius: 1.792px;
    background: rgba(22, 93, 255, 0.05);
    padding: 12px 24px;

    .Btns {
      margin-top: 8px;
      height: 24px;
      font-size: 14px;
      line-height: 24px;

      .edit {
        width: 68px;
        height: 24px;
        border-radius: 4px;
        background: #165DFF;
        color: #FFF;
        text-align: center;
        font-weight: 700;
        margin-left: 74%;

        &:hover {
          cursor: pointer;
        }
      }

      .btnList {
        width: 216px;
        font-weight: 350;
        margin-left: 26%;

        &>div {
          width: 68px;
          height: 24px;
          border-radius: 4px;
          text-align: center;
          border: 1px solid #165DFF;
          color: rgba(22, 93, 255, 0.70);

          &:hover {
            cursor: pointer;
          }

          &:nth-child(1) {
            background: #165DFF;
            color: #FFF;
            font-weight: 700;

          }
        }
      }
    }

    .information_1 {
      width: (320 / 1608) * 100%;
      height: 354px;
      border-top: 2px solid #165DFF;
      border-bottom: 2px solid #165DFF;
      background-color: #FFF;

      .information_con {
        height: 254px;
        overflow: auto;

        &::-webkit-scrollbar {
          width: 6px;
        }

        &::-webkit-scrollbar-thumb {
          background: #165DFF;
          border-radius: 13px;
        }

        &>div {
          height: 44px;
          border-top: 0.895px solid rgba(106, 120, 141, 0.50);
          color: #6A788D;
          font-size: 14.325px;
          font-weight: 500;
          padding-left: 18px;
          display: flex;
          justify-content: space-between;

          .content_1 {
            width: 44px;
            line-height: 44px;
          }

          .content_2 {
            width: 97%;
            padding-right: 15px;
            line-height: 44px;
            // white-space: nowrap;
            // overflow: hidden;
            // text-overflow: ellipsis;

            .el-icon-delete {
              line-height: 44px;
              font-size: 18px;

              &:hover {
                cursor: pointer;
              }
            }

            ::v-deep .el-input {
              width: 90%;
            }

            ::v-deep .el-input--medium .el-input__inner {
              height: 35px !important;
              line-height: 35px !important;
            }

            &:last-child {
              border-top: none;
            }

            &:hover {
              cursor: pointer;
            }
          }
        }

      }
    }

    .active {
      background: rgba(22, 93, 255, 0.20);
    }

    .information_2 {
      width: (1220 / 1608) * 100%;
      height: 354px;
      border-top: 2px solid #165DFF;
      border-bottom: 2px solid #165DFF;
      background-color: #FFF;

      .information_con {
        height: 255px;
        border-radius: 1.791px;
        overflow: auto;

        &::-webkit-scrollbar {
          width: 6px;
        }

        &::-webkit-scrollbar-thumb {
          background: #165DFF;
          border-radius: 13px;
        }

        &>div {
          // height: 52px;
          color: #6A788D;
          font-family: "Source Han Sans CN";
          font-size: 14.325px;
          font-style: normal;
          font-weight: 500;
          padding-left: 18px;


          .content_1 {
            width: 44px;
            line-height: 52px;
          }

          .content_2 {
            width: 97%;
            padding-right: 15px;
            line-height: 52px;
            margin-bottom: 5px;
            // white-space: nowrap;
            // overflow: hidden;
            // text-overflow: ellipsis;

            .el-icon-delete {
              line-height: 52px;
              font-size: 18px;
              margin-right: 20px;

              &:hover {
                cursor: pointer;
              }
            }

            ::v-deep .el-input {
              width: 97%;
            }
          }
        }
      }

      .Btns {
        .edit {
          margin-left: 92%;
        }

        .btnList {
          margin-left: 80%;
        }
      }
    }

    .information_title {
      height: 48px;
      line-height: 48px;
      padding-left: 18px;
      background: rgba(22, 93, 255, 0.20);
      color: #165DFF;
      font-size: 14.325px;
      font-weight: 700;
    }
  }

  .responseTo {
    width: (1608 / 1720) * 100%;
    height: 517px;
    margin-bottom: 14px;
    border-radius: 1.792px;
    background: rgba(22, 93, 255, 0.05);
    padding: 16px 24px;

    &>div {
      width: 100%;
      height: 485px;
      margin: 0 auto;
      background-color: #FFF;
    }

    .responseTo_title {
      height: 56px;
      line-height: 56px;
      border-top: 2px solid #165DFF;

      &>div {
        width: 25%;
        text-align: center;
        overflow: hidden;
        color: #165DFF;
        text-overflow: ellipsis;
        font-size: 14.325px;
        font-weight: 700;

        &:nth-child(1) {
          background: rgba(255, 22, 22, 0.20);
        }

        &:nth-child(2) {
          background: rgba(255, 181, 22, 0.50);
        }

        &:nth-child(3) {
          background: rgba(255, 224, 48, 0.20);
        }

        &:nth-child(4) {
          background: rgba(76, 186, 255, 0.20);
        }
      }
    }

    .responseTo_con {
      height: 350px;

      &>div {
        width: 25%;
        color: #6A788D;
        font-size: 14px;
        font-weight: 500;
        line-height: 19.697px;
        padding: 8px 16px;
      }

      ::v-deep .fixed-height-textarea .el-textarea__inner {
        height: 330px;
        resize: none;
      }
    }

    .edit {
      margin-left: 94%;
    }

    .btnList {
      margin-left: 90%;
      width: 142px;
    }
  }

  .imgs {
    height: 560px;
    background: url('~@/assets/images/应急管理页面/4.png') no-repeat;
    background-size: 100% 100%;
  }

  .later {
    width: (1608 / 1720) * 100%;
    height: 386px;
    margin-bottom: 15px;
    border-radius: 1.792px;
    background: rgba(22, 93, 255, 0.05);
    padding: 12px 24px;

    &>div {
      width: 100%;
      height: 354px;
      background-color: #FFF;
    }

    .laterS {
      height: 315px;
      overflow-y: auto;
      padding: 0 18px;
      color: #6A788D;
      font-size: 14px;
      font-weight: 500;

      &::-webkit-scrollbar {
        width: 6px;
      }

      &::-webkit-scrollbar-thumb {
        background: #165DFF;
        border-radius: 13px;
      }

      &>div {
        height: 45px;
        line-height: 45px;

        .content_1 {
          width: 44px;
        }

        .content_2 {
          width: 97%;
          padding-right: 15px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;

          .el-icon-delete {
            line-height: 45px;
            font-size: 18px;
            margin-right: 20px;

            &:hover {
              cursor: pointer;
            }
          }

          ::v-deep .el-input {
            width: 97%;
          }
        }
      }


    }

    .Btns {
      margin-top: 8px;
      height: 24px;
      font-size: 14px;
      line-height: 24px;

      .edit {
        width: 68px;
        height: 24px;
        border-radius: 4px;
        background: #165DFF;
        color: #FFF;
        text-align: center;
        font-weight: 700;
        margin-left: 94%;

        &:hover {
          cursor: pointer;
        }
      }

      .btnList {
        width: 216px;
        font-weight: 350;
        margin-left: 84%;

        &>div {
          width: 68px;
          height: 24px;
          border-radius: 4px;
          text-align: center;
          border: 1px solid #165DFF;
          color: rgba(22, 93, 255, 0.70);

          &:hover {
            cursor: pointer;
          }

          &:nth-child(1) {
            background: #165DFF;
            color: #FFF;
            font-weight: 700;

          }
        }
      }
    }
  }
}

::v-deep .el-table th.el-table__cell.is-leaf,
.el-table td.el-table__cell {
  border-bottom: none !important;
}
</style>